Transformation and Transition (1/30)
What is the purpose of the transform property in CSS?
    Understanding the Transform Property in CSS

    The `transform` property in CSS allows you to modify the appearance and position of elements in a two-dimensional (2D) or three-dimensional (3D) space without affecting the document flow. It is often used to rotate, scale, translate, or skew elements for both visual effects and interactive transitions.

    Common Transform Functions
    • `translate(x, y)` — moves an element along the X and Y axes.
    • `scale(x, y)` — resizes an element by the given factors.
    • `rotate(angle)` — rotates an element by the specified degree or radian value.
    • `skew(x-angle, y-angle)` — slants an element along the X or Y axis.
    • `matrix(a, b, c, d, e, f)` — applies multiple transforms in one function.
    Example: Applying Transformations

    In this example, the element smoothly rotates, scales up, and shifts to the right when hovered. The `transition` property adds animation to the transformation, making it feel more natural.

    Best Practices for Using Transformations
    • Use `transform` instead of `top`, `left`, or `margin` for smoother animations — it’s GPU-accelerated.
    • Combine multiple transform functions in one declaration for performance efficiency.
    • Pair transformations with `transition` or `animation` for interactive effects.
    • Be mindful of transformed elements’ stacking context, as they create new rendering layers.